<template>
	<el-card>
		<el-button
			@click="reset"
			type="primary"
			>reset</el-button
		>
		<e-table
			:columns="columns"
			:data="list"
			:pagination="pagination"
			v-loading="loading"
			@selection-change="handleSelectionChange"
			@row-click="handleRowClick"
		>
			<template #index="{ index }">
				{{ (pagination.currentPage - 1) * pagination.pageSize + 1 + index }}
			</template>
			<template #tab="{ row }">
				{{ row.tab }}
			</template>
			<template #author="{ row }">
				{{ row.author?.loginname }}
			</template>
			<template #radio="{ row }">
				<a-radio :checked="row.id === id"></a-radio>
			</template>
		</e-table>
	</el-card>
</template>

<script setup lang="tsx">
import { useElTable } from '@/hooks'

const { list, loading, pagination, reset } = useElTable({
	url: urls.fetchList,
	pageSize: 10,
	paginationOptions: { small: true }
})

const id = ref('')

const handleSelectionChange = selectedRow => {
	// console.log(selectedRow)
}

const handleRowClick = row => (id.value = row.id)

const columns: TableColumns[] = [
	{
		slot: 'radio',
		width: 60,
		label: '选择',
		align: 'center'
	},
	{
		label: '序号',
		slot: 'index',
		width: 60,
		align: 'center'
	},
	{
		label: '标题',
		prop: 'title',
		showOverflowTooltip: true,
		renderHeader() {
			return <div>自定义title</div>
		},
		render: row => <div class="color-fuchsia">{row.title}</div>
	},
	{
		label: '作者信息',
		prop: 'author',
		slot: 'author'
	},
	{
		label: '类别',
		prop: 'tab',
		slot: 'tab'
	},
	{
		label: '浏览',
		prop: 'visit_count'
	},
	{
		label: '回复',
		prop: 'reply_count'
	}
]
</script>
